<template>
	<view class="tabbar-wrap">
		<view class="tab-container">
			<view class="tab-item" :class="[item.centerItem ? 'center-item' : '']" @click="changeItem(item)" v-for="(item, index) in tabbarList" :key="index">
				<view class="item-img">
					<image :src="curItem == item.id ? item.selectIcon : item.icon"></image>
				</view>
				<view class="item-txt" :class="[curItem == item.id ? 'item-active' : '']">
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 当前导航栏
		curPage: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			curItem: 0,
			tabbarList: [
				{
					id: 0,
					path: '/pages/tab/home/index',
					icon: '/static/tabbar/home.png',
					selectIcon: '/static/tabbar/home-active.png',
					text: '首页',
					centerItem: false
				},
				{
					id: 1,
					path: '/pages/tab/message/index',
					icon: '/static/tabbar/message.png',
					selectIcon: '/static/tabbar/message-active.png',
					text: '消息',
					centerItem: false
				},
				// {
				// 	id: 2,
				// 	path: '',
				// 	icon: '/static/tabbar/scan.png',
				// 	selectIcon: '/static/tabbar/scan.png',
				// 	text: '',
				// 	centerItem: true
				// },
				{
					id: 3,
					path: '/pages/tab/statistics/index',
					icon: '/static/tabbar/tj.png',
					selectIcon: '/static/tabbar/tj-active.png',
					text: '知识库',
					centerItem: false
				},
				{
					id: 4,
					path: '/pages/tab/user/index',
					icon: '/static/tabbar/my.png',
					selectIcon: '/static/tabbar/my-active.png',
					text: '我的',
					centerItem: false
				}
			]
		}
	},
	mounted() {
		this.curItem = this.curPage;
		uni.hideTabBar();
	},
	methods: {
		changeItem(e) {
			// this.curItem = e.id;
			if (e.id == 2) {
				this.$emit('change', e)
				// uni.navigateTo({
				// 	url: '/pages/service/scanCode/index'
				// })
				return
			}
			console.log(this.curItem, 12121)
			uni.switchTab({
				url: e.path
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tabbar-wrap {
	height: 110rpx;
}
.tab-container {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 110rpx;
	color: #999;
	padding: 5rpx 0;
	background-color: #fff;
	z-index: 9999;
}
.tab-item {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: 100rpx;
	.item-img {
		flex-shrink: 0;
		width: 44rpx;
		height: 44rpx;
		padding: 4rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.item-txt {
		width: 100%;
		font-size: 28rpx;
	}
	.item-active {
		color: #000000;
	}
}
.center-item {
	position: relative;
	.item-img {
		position: absolute;
		top: -70rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}
	.item-txt {
		position: absolute;
		bottom: 5rpx;
	}
}
</style>